/**
 * @Author: liutao
 * @Date:   2017-03-15T11:27:54+08:00
 * @Email:  947809647@qq.com
 * @Last modified by:   jbt
 * @Last modified time: 2017-03-22T10:30:38+08:00
 */

@import '../../../css/var';
@import '../../../css/animate';
@import '../../../css/layout';

$menu-width: 160px;
$menu-height: 90px;
$menu-margin: 20px;
$menu-bg: #324157;
$menu-hover: #8391a5;
$item-height: 35px;

ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.menu-sidebar {
  font-size: 12px;

  position: relative;

  box-sizing: border-box;
  width: 180px;
  height: 100%;

  transition: all .3s;

  background: $menu-bg;

  flex-basis: 180px;
  &.is-hide-sidebar {
    width: 0;

    flex-basis: 0;
  }
  .menu-list {
    overflow-y: scroll;

    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-bottom: 50px;
    .cell {
      line-height: $item-height;

      display: flex;

      height: $item-height;
      padding-left: 10px;

      cursor: pointer;

      color: #bfcbd9;

      align-items: stretch;
      .fa {
        margin: 12px 8px;
      }
      .fa-desktop {
        margin-left: 0;
      }
      .txt {
        flex: 1;
      }
      &:hover {
        color: #000;
        background: #bfcbd9;
      }
    }
    .node.active {
       > .node-cell {
        color: #20a0ff;
        .fa-angle-down {
          transform: rotate(180deg);
        }
      }
    }
    .leaf.active {
      color: #20a0ff;
    }
    .children-list {
      overflow: hidden;

      width: 100%;
      height: auto;
      padding-left: 8px;

      color: #bfcbd9;
      background: #242f42;
    }
  }
  .menu-control {
    position: absolute;
    top: 50%;
    left: 100%;

    width: 20px;
    height: 30px;
    margin-top: -15px;

    cursor: pointer;
    text-align: center;

    color: $menu-bg;
    &:hover {
      color: #fff;
      background-color: $menu-hover;
    }
    .icon-control {
      font-size: 16px;

      transition: transform .3s;
      &.is-hide-menu {
        transform: rotateZ(180deg);
      }
    }
  }
}
